<!-- 直播列表 -->
<template>
	<view class="">
		<view class="content">
			<u-modal v-model="show" content="是否领取优惠券!" show-cancel-button @confirm="showw(1)"></u-modal>
			<u-modal v-model="show1" content="是否领取优惠券!" show-cancel-button @confirm="showw(2)"></u-modal>
			<view class="head" style="position: relative;">
				<!-- <image @click="jump(1)" src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/bg10.png" mode="aspectFill" style="margin-bottom: 80rpx;"></image>
				<image @click="jump(2)" src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/bg30.png" mode="aspectFill"></image> -->
				<view class="postion1" @click="jump(1)"></view>
				<view class="postion2" @click="jump(2)"></view>
			</view>

			<view style="color: #FF225D; margin: 42rpx auto; font-size: 40rpx; text-align: center; ">
				购买返券规则
				<text class="cuIcon-right margin-left-sm"></text>
			</view>
			<view class="dd3"></view>
			<view class="dd4" style="margin-top: 42rpx; box-sizing: border-box;">
				<view style=" margin:0 auto;  padding-top: 40rpx; font-size: 40rpx; text-align: center; " class="text-white">
					推广送券
					<text class="cuIcon-right margin-left-sm"></text>
				</view>
				<view class="listt">购买者和推广者享受同样的优惠券</view>
				<view class="listt">首次推广三个团长，返298元现金</view>
			</view>
		</view>

		<block>
			<u-popup v-model="show1w" mode="bottom" border-radius="14" height="250rpx" :mask-close-able="false">
				<view class="ddd" style="display: flex; justify-content: center; padding-top: 30rpx;">
					<button
						class="cu-btn1 cu-btn"
						open-type="getPhoneNumber"
						@getphonenumber="getMobileNum"
						style="background-color: #671729; width: 690rpx; color: #FFFFFF; margin: 0  auto; font-size: 30rpx;"
					>
						获取手机号码
					</button>
				</view>
			</u-popup>
		</block>

		<view class="foot_box"></view>
		<!-- 自定义底部导航 -->
		<shopro-tabbar></shopro-tabbar>
		<!-- 关注弹窗 -->
		<shopro-float-btn></shopro-float-btn>
		<!-- 连续弹窗提醒 -->
		<shopro-notice-modal></shopro-notice-modal>
		<!-- 登录提示 -->
		<shopro-login-modal></shopro-login-modal>
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			show: false,
			show1: false,
			show1w: true,
		};
	},
	computed: {},
	onLoad() {
		var userInfo = uni.getStorageSync('userInfo');
		var phone = uni.getStorageSync('phone');
		console.log('userInfo :>> ', userInfo);
		if (userInfo.mobile || phone) {
			this.show1w = false;
		}
	},
	onHide() {},
	methods: {
		// 切换tab
		// 加载更多
		async getMobileNum(e) {
			console.log('e --------------------------- : >> ', e);
			const [err, res] = await uni.login().catch(err => err);
			if (err || res.errMsg !== 'login:ok') return uni.$showMsg('登录失败！');
			const obj = {
				session_key: uni.getStorageSync('session_key'),
				encryptedData: e.detail.encryptedData,
				iv: e.detail.iv,
				code: res.code,
			};
			const ress = await this.$api('getMobileNum', obj);

			this.show1w = false;

			uni.setStorageSync('phone', ress.data);
			console.log('ress --------------------------- : >> ', ress);
		},

		jump(e) {
			var userInfo = uni.getStorageSync('userInfo');
			var phone = uni.getStorageSync('phone');
			console.log('userInfo :>> ', userInfo);
			if (userInfo.mobile || phone) {
				if (e == 1) {
					this.show = true;
				} else {
					this.show1 = true;
				}
			} else {
				this.show1w = true;
			}
		},

		showw(e) {
			if (e == 1) {
				this.getLiveList(5);
			} else {
				this.getLiveList(6);
			}
		},

		getLiveList(id) {
			this.$api('receiveDisc', {
				id,
			}).then(res => {
				console.log('res :>> ', res);
			});
		},
	},
};
</script>

<style lang="scss" scoped>
.content {
	/deep/.ddd {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	/deep/.cu-btn1 {
		height: 70rpx;
		font-size: 30rpx;
		width: 690rpx !important;
		margin: 0 auto !important;
		color: #ffffff;
		background-color: #671729;
	}

	width: 100vw;
	height: 3290rpx;
	//padding-bottom: 400rpx;
	background: url(https://sprtcar.oss-cn-chengdu.aliyuncs.com/images/3232.png) no-repeat center;
	background-size: cover;
	overflow: hidden;
	.dd3 {
		width: 690rpx;
		height: 946rpx;
		border-radius: 10rpx;
		overflow: hidden;
		margin: 0 auto;
		background: url(https://sprtcar.oss-cn-chengdu.aliyuncs.com/images/zhongb.png) no-repeat center;
		background-size: cover;
	}
	.dd4 {
		width: 750rpx;
		height: 880rpx;
		margin: 0 auto;
		background: url(https://sprtcar.oss-cn-chengdu.aliyuncs.com/images/ttt.png) no-repeat center;
		background-size: cover;
		.listt {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 520rpx;
			height: 80rpx;
			background: linear-gradient(265deg, #a045d0, #c33fd3);
			opacity: 0.9;
			border-radius: 40rpx;
			margin: 0 auto;
			margin-top: 30rpx;
			color: #ffffff;
		}
	}
	.head {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 704rpx;
		height: 778rpx;
		margin: 0 auto;
		margin-top: 400rpx;

		background: url(https://sprtcar.oss-cn-chengdu.aliyuncs.com/images/001.png) no-repeat center;
		background-size: cover;
		.postion1 {
			position: absolute;
			top: 102rpx;
			right: 70rpx;
			width: 450rpx;
			height: 220rpx;
			background: transparent;
		}
		.postion2 {
			position: absolute;
			bottom: 187rpx;
			right: 70rpx;
			width: 450rpx;
			height: 220rpx;
			background: transparent;
		}
		image {
			width: 506rpx;
			height: 266rpx;
		}
	}
	.activity {
		margin: 81rpx 0 60rpx 0;
		.t {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ff225d;
		}
	}
	.buyw {
		text-align: center;
		margin-bottom: 47rpx;
		text {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
		}
	}

	.anniu {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 600rpx;
		height: 90rpx;
		margin: 0 auto;
		margin-top: 110rpx;
		background: url(https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/bganniu.png) no-repeat center;
		background-size: cover;

		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #ffffff;
		.pos {
			position: absolute;
			top: 0;
			left: 0;
			width: 600rpx;
			height: 90rpx;
			background: rgba(0, 0, 0, 0);
		}
	}
}
// tab

// 瀑布流 list
</style>
